<template>
  <div>
    <div class="classification">
      <!-- 这里用了个=（赋值）全部高亮了。 -->
      <span
        class="item"
        :class="{ active: tag == '全部' }"
        @click="tag = '全部'"
        >全部</span
      >
      <span
        class="item"
        :class="{ active: tag == '欧美' }"
        @click="tag = '欧美'"
        >欧美</span
      >
      <span
        class="item"
        :class="{ active: tag == '华语' }"
        @click="tag = '华语'"
        >华语</span
      >
      <span
        class="item"
        :class="{ active: tag == '流行' }"
        @click="tag = '流行'"
        >流行</span
      >
      <span
        class="item"
        :class="{ active: tag == '说唱' }"
        @click="tag = '说唱'"
        >说唱</span
      >
      <span
        class="item"
        :class="{ active: tag == '摇滚' }"
        @click="tag = '摇滚'"
        >摇滚</span
      >
      <span
        class="item"
        :class="{ active: tag == '民谣' }"
        @click="tag = '民谣'"
        >民谣</span
      >
      <span
        class="item"
        :class="{ active: tag == '电子' }"
        @click="tag = '电子'"
        >电子</span
      >
      <span
        class="item"
        :class="{ active: tag == '轻音乐' }"
        @click="tag = '轻音乐'"
        >轻音乐</span
      >
      <span
        class="item"
        :class="{ active: tag == '影视原声' }"
        @click="tag = '影视原声'"
        >影视原声</span
      >
      <span class="item" :class="{ active: tag == 'ACG' }" @click="tag = 'ACG'"
        >ACG</span
      >
    </div>
    <div class="cardgroup">
      <div
        class="card"
        v-for="(item, index) in cardlist"
        :key="index"
        @click="tomusiclist(item.id)"
      >
        <img :src="item.coverImgUrl" alt="" />
        <p>{{ item.name }}</p>
      </div>
    </div>
    <!-- 分页器 -->
    <div class="cut">
      <el-pagination
        @current-change="currentchange"
        :page-size="pagesize"
        layout="prev, pager, next"
        :total="total"
        :current-page="currentpage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tag: "全部", //当前选择的分类
      cardlist: [], //歌单组
      total:0,
      pagesize:10,
      currentpage:1,//当前页
    };
  },
  //侦听器
  watch: {
    tag() {
      console.log(this.tag);
      this.getmusiclist();
      this.currentpage=1
    },
  },
  created() {
    this.getmusiclist();
  },
  methods: {
    tomusiclist(id) {
      this.$router.push({ path: `/musiclist?q=${id}` });
    },
    currentchange(val){
        this.currentpage=val
        this.getmusiclist()
    },
    getmusiclist() {
      //   获取歌单数据

      axios({
        url: "https://autumnfish.cn/top/playlist/",
        method: "get",
        params: {
          limit: 10,
          offset: (this.currentpage-1)*10,
          cat: this.tag,
        },
      }).then((res) => {
        console.log(res);
        this.cardlist = res.data.playlists;
        // 保存总条数
        this.total=res.data.total
      });
    },
  },
};
</script>

<style>
.classification {
  /* position: absolute;
 right: 100px; */
  height: 50px;
  padding: 0 0 0 600px;
}
span {
  margin: 0 5px;
  font-size: 18px;
}
.active {
  color: rgb(206, 21, 21);
}

.cardgroup {
}
.cardgroup div {
  float: left;
}
.card {
  width: 200px;
  height: 220px;
  margin: 20px;
}
.card img {
  width: 200px;
  height: 200px;
}
.card p {
  width: 200px;
  display: block;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}

.cut{
    width: 800px;
    height: 100px;
    clear: both;
    
}
.el-pagination{
   
}
</style>